<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>小视频贩卖网</title>
  <!-- icon -->
  <link rel="stylesheet" href="/static/css/common/fonts/iconfont.css">
  <!-- logo图标 -->
  <link rel="icon" href="/static/favicon.ico" type="image/iconx">
  <!-- 消除浏览器差异 -->
  <link rel="stylesheet" href="/static/css/common/reset.css">
  <!-- 要写的CSS -->
  <link rel="stylesheet" href="/static/css/vedio.css">
</head>
<body>
  <div id="root">
    <!-- header -->
    <header class="header">
      <section class="left">
        <a href="/" style="color: #fff">
          <img src="/static/images/favicon.ico" class="logo">
          <span class="title">小视频贩卖网</span>
        </a>
      </section>

      <section class="tab">
        <div class="tab-item">
          <a href="/type?id=592c253d3a322270d55a0b9f" class="item">课程</a>
        </div>
        <div class="tab-item">
          <a href="javascript:;" class="item" @click="payFor">付费咨询</a>
        </div>
      </section>

      <section class="right">
        <a href="/order">
          <div class="shopcar">
            <i class="iconfont icon-gouwuche"></i>
            <span class="title">购物车</span>
          </div>
        </a>
        <div class="sign" v-if="!isSingnedin">
          <span class="signin"
            @click="signin">登录</span>
          <span class="signup"
            @click="signup">注册</span>
        </div>
        <div class="sign loging" v-if="isSingnedin">
          <div class="personal-wrapper">
            <img :src="_user.avatar" width="40" height="40">
          </div>
          <div class="information-wrapper">
            <div class="first">
              <div class="left-wrapper">
                <img :src="_user.avatar" width="75" height="75">
              </div>
              <div class="right-wrapper">
                <h3 class="name"><a href="/personal">{{ _user.username }}</a></h3>  
              </div>              
            </div>
            <div class="second">
              <div class="block-wrapper">
                <a href="/personal?type=course" class="shopcar">我的课程</a>
                <a href="/order" class="shopcar">我的订单</a>
                <a href="/personal" class="shopcar">个人设置</a>
              </div>
            </div>
            <div class="signout">
              <a :href="'/v1/api/user/logout/'+_user._id" class="out">安全退出</a>
            </div>
          </div>
        </div>
      </section>

      <section class="form-wrapper">
        <form action="" class="form-item">
          <div class="form-control">
            <input type="text" name="search" class="input-content">
            <button type="submit" class="submit">
              <i class="iconfont icon-sousuo-sousuo"></i>
            </button>
          </div>
        </form>
      </section>

    </header>
  
    <div class="vedio-wrapper">
      <div class="heading">
      </div>
      <div class="heading-wrapper">
        <h2 class="title">{{ thisVedio.title }}</h2>

        <p class="instruction">一份独一无二的, 来自
          <span class="author">{{ thisVedio.author.name }}</span>
          的独家珍藏!
        </p>
        
        <div class="desc">
          <div class="diffculty">难度: {{ thisVedio.diffculty | filDif }}</div>
          <div class="total-time">时长: {{ totalTime }}</div>
        </div>

        <div class="money">
          ￥{{ thisVedio.money }}
        </div>

        <div class="btn buy" v-if="!hasThisVedio" @click="addToShopCar">加入购物车</div>
        <div class="btn buy" v-if="hasThisVedio" @click="isActive = 2">继续学习</div>
      </div>
      
      <div class="nav-bar">
        <ul class="nav-list">
          <li class="nav-item" :class="{active: isActive === 0}" @click="isActive = 0">
            课程介绍  
          </li>
          <li class="nav-item" :class="{active: isActive === 1}" @click="isActive = 1"> 
            课程评价
          </li>
          <li class="nav-item" :class="{active: isActive === 2}" @click="studyThisCourse"> 
            学习课程
          </li>
        </ul>
      </div>

      <div class="content-wrapper">

        <div class="course-instruction" v-if="isActive === 0">
          <div class="vedio-player-wrapper">
            <video width="780" height="540" controls>
              <source src="/static/vedios/test.mp4" type="video/mp4">
              您的浏览器不支持Video标签。
            </video>
          </div>

          <div class="instruction">
            <h2 class="title">课程介绍</h2>

            <p class="desc">{{ thisVedio.summary }}</p>
          </div>

          <div class="author-instruction">
            <h3 class="title">讲师介绍</h3>
          
            <div class="wrapper">
              <div class="author-wrapper">
                <div class="left">
                  <img width="200" height="200" :src="thisVedio.author.avatar" :alt="thisVedio.author.nickname">
                </div>
                <div class="right">
                  <h3 class="title">哈工大威海著名老司机</h3>

                  <p class="name">{{ thisVedio.author.name }}</p>

                  <p style="text-align: left; padding-bottom: 12px">讲师告诉你, 你可以学到: </p>
                  <p class="summary">{{ thisVedio.promotion }}</p>
                </div>
              </div>
            </div>
          </div>
        </div>
  
        <div class="course-comment" v-if="isActive === 1">
          <div class="content-wrapper">

            <div class="comment-wrapper">
              <h3 class="title">用户评价</h3>

              <ul class="comments-wrapper">
                <li class="comment" v-for="comment of thisVedio.comment">
                  <div class="wrapper">
                    <h3 class="time-wrapper">{{ comment.meta.updateAt }}</h3>
                    {{ comment.content }}
                  </div>
                </li>
                <li class="comment" v-if="!thisVedio.comment.length">暂无评论</li>
              </ul>

              <div class="submit-comment" v-if="hasThisVedio">
                <textarea rows="6" cols="45" v-model="commentContent"></textarea>
                <button type="button" @click="commentThis">评论</button>
              </div>
            </div>
          </div>
        </div>
        
        <div class="course-study" v-if="isActive === 2">
          <div class="courses-wrapper">
            <h3 class="title">课程章节</h3>

            <div class="courses-list">
              <ul class="courses">
                <li class="course"
                 v-for="child of thisVedio.children">
                  <a :href="'/vediochild?id=' + child._id" class="link-to-child">
                    {{ child.title }}
                    <span class="enter"><i class="iconfont icon-iconfont-edu09"></i></span>
                  </a>
                 </li>
                 <li class="course" v-if="!thisVedio.children.length">
                   讲师暂时还没有发布课程章节
                 </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>

    <footer class="footer">

      <div class="footer-wrapper">
        <div class="first-line">
          <a href="https://github.com/lastIndexOf" class="github">
            <i class="iconfont icon-github"></i>
          </a>
        </div>
        <div class="second-line">
          <a href="https://github.com/lastIndexOf/E-commerce.git" class="about-us">文档链接</a>
          <a href="javascript:;"
            class="about-us"
            @click="aboutUs">关于我们</a>
        </div>
        <div class="last-line">
          @made by 郑凡恺， 冯博， 章焕
        </div>
      </div>
    </footer>
    <div class="to-top"
      v-show="isShow"
      @click="toTop">
      <i class="iconfont icon-fanhuidingbu"></i>
    </div>

  </div>
  
  <script src="/static/js/bundles/vedio.js"></script>
</body>
</html>
